<template>
<!-- 此模板是其他管理-抽奖-创建活动里面需要复用的奖项“设置模块” -->
    <div>
        <span class="title">{{title}}</span>
        <el-row class="create-body">
            <el-col :span="5">
                <el-form ref="form1" :model="form">
                    <el-form-item label="封面" prop="item_path" :rules="filter_rules({type: 'upload'})">
                        <el-upload action="/api/backstage/fileUpload" class="avatar-uploader" 
                        name="file_path" :before-upload="beforeAvatarUpload" 
                        :on-success='handleSuccess' :show-file-list="false">
                            <img v-if="form.item_path" :src="form.item_path" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="19">
                <el-row type="flex" justify="end" class="btn-row">
                    <el-col :span="3">
                        <el-checkbox @change="checkChange" v-model="form.thank">
                            <span class="xiexie">谢谢参与</span>
                        </el-checkbox>
                    </el-col>
                    <el-col :span="3">
                        <el-button size="mini" type="primary" @click="openDetail">奖品详情</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-form ref="form2" :model="form" :inline="true" >
                        <el-col :span="8">
                            <el-form-item label="奖项名称" prop="item_name" :rules="filter_rules({required: true})">
                                <el-input clearable placeholder="*等奖" v-model.trim="form.item_name">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="中奖率" prop="winning_rate" :rules="filter_rules({required: true, type: 'integer'})">
                                <el-input suffix-icon="iconfont ali-baifenbi1" @focus="inpFocus(form.winning_rate)" @blur="inpBlur(form.winning_rate)" clearable placeholder="请输入" v-model.number="form.winning_rate">
                                </el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="奖项数量" prop="item_nums" :rules="filter_rules({required: true})">
                                <el-input clearable placeholder="请输入" v-model.number="form.item_nums">
                                </el-input>
                            </el-form-item>
                        </el-col>
                    </el-form>
                </el-row>
            </el-col>
        </el-row>
        <el-dialog :title="title" :visible.sync="isShow" width="50%" >
            <textarea v-focus placeholder="请编辑奖品详情..." class="detail" v-model="form.item_details"></textarea>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="isShow = false">保 存</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import backstage_fileUpload from '@/api/login'
import { mapGetters } from 'vuex'
import { formateBool } from '@/utils'

export default {
    props:{
        title: String, num: Number
    },
    directives: {
      focus: {
        // 指令的定义
        inserted: function (el) {
          el.focus()
        }
      }
    },
    data(){
        return{
            form: {item_path: '',winning_rate: 0,item_nums: 0, thank_you: 0, item_details: ''},
            cacheNum: 0,
            cacheNums: '',
            ossPublicUrl: localStorage.getItem("ossPublicUrl"),
            isShow: false
        }
    },
    computed:{
        ...mapGetters([
            'percent','cacheDrawItems','checkDraw'
        ])
    },
    methods: {
        openDetail(){//打开奖品详情模态
            this.isShow = true;
        },
        checkChange(e){//或许谢谢参与更新后的值
            this.form.thank_you = formateBool(e);
        },
        inpFocus(e){
            this.cacheNums = e
        },
        inpBlur(e){//中奖率失去焦点时候
        this.cacheNum = this.cacheNums
            if(typeof e === 'number' && e%1 === 0){
                this.$store.dispatch('SetPercentNum', this.percent - this.cacheNum + e)
                this.$nextTick(() => {
                    this.cacheNum = e
                })
            }
        },
        beforeAvatarUpload(file){
            let name = file.name.split('.');
            if(name[name.length - 1] === 'jpg'||name[name.length - 1] === 'jpeg'||name[name.length - 1] === 'png'){
                return file
            }else {
                this.$message.error('图片只能是 jpeg/png 格式!')
                return false
            }
        },
        handleSuccess(res,file,fileList){
            if(res.status == 100){
                this.form.item_path = this.ossPublicUrl + '/' + res.data.file_path
            }
        },
        validate(){
            for (var i = 1; i < 3; i++) {
                this.$refs[`form${i}`].validate((valid) => {
                    if (!valid) {
                        this.$emit('judge',false)
                        return false;
                    }
                });
            }
        },
        initList(){
            let draw = this.cacheDrawItems[this.num];
            let insert = {
                thank: draw.thank_you==1?true:false
            }
            this.form = {...draw, ...insert};
            this.$store.dispatch('SetPercentNum', 100);
            this.cacheNum = this.cacheNums || 0;
        }
    },
    created(){
        this.$store.dispatch('SetPercentNum', 0);
        if(this.checkDraw == 'edit'){
            this.$nextTick(() => {
                this.initList()
            })
        }
    }
}
</script>
<style lang="scss" scoped>
$border: 1px dashed #d9d9d9;
$picture-size: 120px;
.title{
    color:#606266;
    font-size: 14px;
    font-weight: bold;
}
.picture{
    font-size: 80px;
    color: #868686;
}
.create-body{
    padding-top: 10px;
    .btn-row{
        margin-bottom: 20px;
        .xiexie{
            color: #E6A23D;
            font-size: 13px;
        }
    }
}

.avatar-uploader {
    .el-upload {
        border: $border;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
        &:hover {
            border-color: #409EFF;
        }
    }
}
.avatar-uploader-icon {
    border: $border;
    font-size: 28px;
    color: #8c939d;
    width: $picture-size;
    height: $picture-size;
    line-height: $picture-size;
    text-align: center;
    border-radius: 5px;
}
.avatar {
    width: $picture-size;
    height: $picture-size;
    display: block;
    border-radius: 5px;
}
.detail {
    width: 100%;
    height: 200px;
    border-radius: 5px;
    border: 1px soild #B7B6B4; 
    padding: 10px
}
</style>
